<!DOCTYPE html>
<!--
Copyright 2013 The Polymer Authors. All rights reserved.
Use of this source code is governed by a BSD-style
license that can be found in the LICENSE file.
-->
<html>
<head>
  <title>Psuedo scoped styling</title>
  <script src="../../../platform.js"></script>
  <script src="register.js"></script>
  <script src="../../../tools/test/htmltest.js"></script>
  <script src="../../../node_modules/chai/chai.js"></script>
  <script>
    if (window.ShadowDOMPolyfill) {
      Platform.ShadowCSS.strictStyling = true;
    }
  </script>
  <style>
    div {
      font-size: 10px;
    }
  </style>
</head>
<body>
  <x-foo></x-foo>
  <div id="outerScopeDiv">10px</div>

  <template id="x-inner">
    <div>Not green</div>
  </template>

  <template id="x-foo">
    <style>
      @host {
        * {
          display: block;
          border: 1px solid black;
        }
      }

      div {
        font-size: 20px;
        background: green;
      }

      @media screen and (max-width: 800px) {
        div {
          font-size: 50px;
        }
      } 
    </style>
    <div>20px / 50px</div>
    <x-inner></x-inner>
  </template>
  <script>
    register('x-inner', '', HTMLElement.prototype, ['x-inner']);
    register('x-foo', '', HTMLElement.prototype, ['x-foo']);
    
    document.addEventListener('WebComponentsReady', function() {
      setTimeout(function() {
        var foo = document.querySelector('x-foo');
        fooDiv = foo.shadowRoot.querySelector('div');
        innerDiv = foo.shadowRoot.querySelector('x-inner')
          .webkitShadowRoot.querySelector('div');
        chai.assert.equal(getComputedStyle(fooDiv).fontSize, window.innerWidth < 800 ? '50px' : '20px',
          'shadowDOM styles are applied');
        var div = document.querySelector('#outerScopeDiv');
        chai.assert.equal(getComputedStyle(div).fontSize, '10px',
          'shadowDOM styles are applied only in the correct scope');
        var bgColor = getComputedStyle(innerDiv).backgroundColor;
        chai.assert.isTrue(bgColor == 'rgba(0, 0, 0, 0)'|| bgColor == 'transparent',
          'upper bound encapsulation is enforced');
        done();
      });
    });
  </script>
  
  
</body>
</html>
